<template>
	<view class="content">
		<!-- 答主详情页 -->
		<!-- header部分 -->
		<view class="content-header" :style="true?`background-image: url(${background_img});`:''">
			<view class="content-header-nav" :style="bgColor?`background-color:${bgColor}`:''">
				<view class="content-header-nav-top" :style="gps?`height:${gps+'px'}`:``"></view>
				<view class="content-header-nav-bottom">
					<!-- <img src="../../static/searchbtn.png" alt="" class="header-left-img" @click="goindexseach" /> -->
					<!-- <span>我的</span> -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="content-body-left" style="">
						<div class="arrow-left" @click="goshang"> <u-icon name="arrow-left" size="19"></u-icon></div>
						<u-line direction="column" :hairline="false" length="16" margin="0 1px"></u-line>
						<div class="arrow-left" @click="goindex"> <u-icon name="home-fill" size="20"></u-icon></div>
					</view>
					<!-- #endif -->
					<span>主页</span>
					<view style="width: 160rpx;height: 100%;margin-right: 30rpx;">
					</view>
				</view>
			</view>
			<!-- 蒙层 -->
			<view class="moder">
			</view>
			<!-- 用户头像部分 -->
			<view class="content-header-user">
				<view class="header-user-img">
					<img :src="uservalue?.avatar?.url" alt=""
						style="width: 150rpx;height: 150rpx;border-radius: 100rpx;box-sizing: border-box;border: 2px solid #fff;">
					<img :src="queryIconImage(`cardlogo1`)" alt=""
						style="width: 30rpx;height: 30rpx;position: absolute;bottom: 0;right: 0;">
				</view>
				<span>{{uservalue?.nickname}}</span>
				<view class="right-title-right">
					<uni-rate :readonly="true" :size="18"
						:value="uservalue?.article_comment_score_aggregate?.aggregate?.avg.score" :allowHalf="true" />
					<span
						class="content-score-text">{{uservalue?.article_comment_score_aggregate?.aggregate?.avg.score || 0}}</span>
				</view>


			</view>
			<!-- 毛玻璃部分 -->
			<view class="content-header-mao">
				<view class="header-mao-content">
					<view class="mao-content-list">
						<span
							style="font-family: Alibaba PuHuiTi 2.0;font-weight: 600;font-size: 36rpx;">{{uservalue?.user_interest?.length}}</span>
						<span>关注</span>
					</view>
					<view class="mao-content-list">
						<span
							style="font-family: Alibaba PuHuiTi 2.0;font-weight: 600;font-size: 36rpx;">{{uservalue?.user_fans?.length}}</span>
						<span>粉丝</span>
					</view>
					<view class="mao-content-list">
						<span
							style="font-family: Alibaba PuHuiTi 2.0;font-weight: 600;font-size: 36rpx;">{{uservalue?.article_comments?.length}}</span>
						<span>回答</span>
					</view>
					<view class="mao-content-list">
						<span
							style="font-family: Alibaba PuHuiTi 2.0;font-weight: 600;font-size: 36rpx;">{{uservalue?.reward_funds_personnel?.length}}</span>
						<span>被采纳</span>
					</view>
				</view>
			</view>
			<!-- 专业标签部分 -->
			<view class="content-header-lable">
				<span>专业标签:</span>
				<view class="header-lable-list">
					<span v-for="(item,index) in uservalue.tag_list" :key="index"
						class="lable-list-text">{{item.label}}</span>

				</view>
			</view>
			<!-- 视频播放部分 -->
			<view class="content-header-video">
				<view class="header-video-content">
					<!-- 第一个盒子 -->
					<view class="video-content-one">

					</view>
					<!-- 第二个盒子 -->
					<view class="video-content-one" style="width: 675rpx; top: 10rpx;">

					</view>
					<!-- 第三个盒子 -->
					<view class="video-content-trhee">
						<view class="content-trhee-title">
							<span
								style="color: #FFFFFF;font-family: Alibaba PuHuiTi 2.0;font-weight: 600;font-size: 24rpx;">答主相关展示</span>
							<span>视频内容由官方审核后上传展示</span>
						</view>
						<view class="content-trhee-video">
							<video :src="uservalue?.video?.video?.url" style="width: 100%; height: 100%;"></video>
						</view>
					</view>

				</view>

			</view>
			<!-- 点赞分享定位部分 -->
			<view class="content-header-postion">
				<button open-type="share" class="content-bottom-rightbtn" @click="startmethod(e)" :disabled="editBlean"
					style="margin-bottom: 20rpx;">
					<img :src="queryIconImage(`answerpostion1`)" alt="" style="width: 40rpx;height: 40rpx; ">
				</button>

				<image :src="linkblean?queryIconImage(`answerpostion3`):queryIconImage(`answerpostion2`)" alt=""
					style="width: 40rpx;height: 40rpx;" @click.stop="linkchaneg" />
			</view>
		</view>
		<!-- 主体内容部分 -->
		<view class="content-body">
			<!-- 选择框 -->
			<view class="content-body-selsect">
				<span style="margin-right: 30rpx;" :class="selsectindex==0?'selsect-text':''"
					@click="changeselect(chooseType=0)">答主简介</span>
				<span :class="selsectindex==1?'selsect-text':''" @click="changeselect(chooseType=1)">TA的回答</span>
			</view>
			<!-- 答主简介 -->
			<view class="content-body-ansewrdetalis" v-if="selsectindex==0">
				<textarea class="textraea" auto-height :value="uservalue.profile" :disabled="true" maxlength="-1" />
				<view class="user_img" v-for="item in uservalue.ud_profileimg_f95768" :key="item.id">
					<img :src="item?.image?.url" alt="" class="show_img" :style="{height:+item.image.imgHeight+'px'}">
				</view>
				<!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
			</view>
			<!-- TA的回答部分 -->
			<view class="content-body-two" v-if="selsectindex==1">
				<!-- 回答列表 -->
				<view class="body-two-list" v-for="(item,index) in answerList" :key="item.id"
					@click="goquestiondetails(item.article?.id)">
					<view class="two-list-title">
						<span>{{item.article?.title}}</span>
					</view>
					<!-- user部分 -->
					<view class="two-list-user">
						<view class="list-user-left">
							<img :src="uservalue?.avatar.url" alt=""
								style="width: 50rpx;height: 50rpx;border-radius: 50rpx;border: 2rpx solid #ccc;margin-right: 12rpx;">
							<span>{{uservalue?.nickname}}</span>
						</view>
						<span>{{ $utils.dateFormat(item.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
					</view>
					<!-- 视频及文字部分 -->
					<view class="two-list-content">
						<!-- 视频 -->
						<!-- 	<view class="list-content-vids" v-for="(v,i) in item?.article_comment_detail" :key="v.id">
							<view class="list-content-video" v-if="v?.video&&v.content!=='录音'">
								<video :src="v?.video?.url" style="width: 635rpx;height: 400rpx;"></video>
							</view>
						</view> -->

						<!-- 文字 -->
						<view class="list-content-text">
							<span>{{item.content}}</span>
						</view>
					</view>
					<!-- 评论及滇藏部分 -->
					<view class="two-list-bottom">
						<view class="page-content-bodydown">
							<view class="content-bodydown-left">
								<span v-for="(v,i) in item.article?.article_comment" :key="v.id">{{v}},</span>
							</view>
							<view class="content-bodydown-right">
								<span>等答主 也发表了{{item.article?.article_comment?.length}}个回答</span>
							</view>
						</view>
						<view class="page-content-bottom">
							<view class="content-bottom-like">
								<img :src="queryIconImage(`likelogo1`)" alt="" class="bottom-like-img">
								<span>{{item?.zanlink?item?.zanlink:0}}</span>
							</view>
							<view class="content-bottom-comment">
								<img :src="queryIconImage(`commentlogo1`)" alt="" class="bottom-comment-img">
								<span>{{item?.collect?item?.collect:0}}</span>
							</view>
							<view class="content-bottom-like" style="margin-left: 25rpx;">
								<img :src="queryIconImage(`questiondetalogo8`)" alt="" class="bottom-like-img">
								<span>0</span>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 尾部部分 -->
		<view class="content-footer">
			<!-- 底部加载中 -->
			<view class="content-footer-title" v-if="chooseType==1">
				<span>{{footervale}}</span>
			</view>
			<!-- 底部按钮 -->
			<view class="content-footer-btn" @click="goquestion">
				<span>向TA提问</span>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		Time
	} from "@/utils/timenew.js"
	export default {
		data() {
			return {
				editBlean: false,
				linkblean: false,
				footervale: '上滑加载更多内容 ↑',
				// imgurl: '../../../static/headerbackground1.png',
				selsectindex: 0,
				gps: '',
				bgColor: 'rgba(165, 42, 42, 0)',
				imgList: [],
				uservalue: {},
				answerList: [],
				userid: 0,
				pageSize: 2,
				currentPage: 1,
				currentPagevalue: 1,
				background_img: '',
				systemInfo: {},
				imgHeight: 0,
				chooseType: 0
			}
		},
		onLoad: function(option) {
			//#ifdef MP-WEIXIN

			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			console.log("胶囊位置信息", arr);
			//#endif
			if (option.id) {
				this.systemInfo = uni.getWindowInfo()
				this.queryBackgroundImage()
				this.userid = option.id
				this.getData(option.id)
			}
		},
		// 触底加载
		onReachBottom() {
			if (this.selsectindex == 1) {
				uni.showLoading({
					title: '加载中'
				});
				this.currentPagevalue++
				this.$store.dispatch("remote/query", {
					model: "article_comment",
					order_by: {
						id: 'desc'
					},
					where: {
						user_user: {
							_eq: this.userid
						},
						article_article: {
							_is_null: false
						}
					},
					isloading: false,
					limit: 2,
					offset: (this.currentPagevalue - 1) * 2,
					field_string: 'id content zanlink collect created_at user_user article_article article{id user_user type title content price_cny created_at answer_type status article_visits{visit_times} user{id nickname} article_detail{id video{url} img{url}} article_comment{id user{id nickname}}} article_comment_detail{id content img{url} video{url}}'
				}).then(res => {
					if (res.data_list?.length > 0) {
						uni.hideLoading();
						let add = []

						add = JSON.parse(JSON.stringify(res.data_list)).map(v => {
							v.created_at = Time(v.created_at)
							return v
						})
						//TODO
						for (let i = 0; i < add.length; i++) {
							let nameList = []
							let user_comment = ''
							for (let k = 0; k < add[i].content.length / 3; k++) {
								user_comment += add[i].content[k]
							}
							user_comment = user_comment + '...'
							add[i].content = user_comment
							for (let j = 0; j < add[i].article.article_comment.length; j++) {
								if (add[i].article.article_comment[j].user && nameList.includes(add[i].article
										.article_comment[j].user.nickname) == false) {
									nameList.push(add[i].article.article_comment[j].user.nickname)
								}
							}
							add[i].article.article_comment = nameList
						}
						this.answerList.push(...add)
						// let nameList = []
						// for (let i = 0; i < this.answerList.length; i++) {
						// 	nameList = []
						// 	for (let j = 0; j < this.answerList[i].article.article_comment.length; j++) {

						// 		if (this.answerList[i].article.article_comment[j].user && nameList.includes(this
						// 				.answerList[i].article.article_comment[j].user
						// 				.nickname) ==
						// 			false) {
						// 			nameList.push(this.answerList[i].article.article_comment[j].user.nickname)
						// 		}
						// 	}
						// 	this.answerList[i].article.article_comment = nameList
						// }
						console.log('回答列表', this.answerList);
					} else {
						uni.hideLoading();
						this.footervale = '已经无数据'
					}

				})
			}
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
		computed: {
			...mapState({
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		methods: {

			queryBackgroundImage() {
				console.log("systemInfo", this.systemInfo);
				this.$store.dispatch('remote/query', {
					model: "system",
					field_string: `id answer_background_img{id url}`,
					where: {
						id: {
							_eq: 1
						}
					}
				}).then(res => {
					this.background_img = res.data.answer_background_img.url
					var that = this
					uni.getImageInfo({
						src: that.background_img,
						success(res) {
							let rate = that.systemInfo.screenWidth / res.width
							that.imgHeight = Math.floor(rate * res.height)
							console.log("-----------------高度为-------------", that.imgHeight);

						}
					})
				})
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			getLink() {
				this.$store.dispatch("remote/query", {
					model: "user",
					where: {
						id: {
							_eq: this.userid
						}
					},
					field_string: 'user_interest{id user_user user_fans_user} user_fans{id user_user user_fans_user}'
				}).then(res => {
					console.log('----------------------fans------------------', res.data);
					res.data.user_interest.forEach((v, i) => {
						if (v.user_fans_user == uni.getStorageSync('userInfo').id) {
							this.linkblean = true
						}
					})
					this.uservalue.user_interest = res.data.user_interest
					this.uservalue.user_fans = res.data.user_fans
				})
			},

			//关注
			linkchaneg() {
				this.linkblean = !this.linkblean
				if (this.linkblean) {
					this.$store.dispatch("remote/mutation", {
						operation: "insert_user_interest",
						objects: [{
							user_fans_user: this.userid,
							user_user: uni.getStorageSync('userInfo').id
						}],
						isloading: false,
						field_string: 'id'
					}).then(res => {
						this.getLink()
						console.log("关注成功", res)
					})
				} else {
					this.$store.dispatch("remote/mutation", {
						operation: "delete_user_interest",
						where: {
							_and: [{
								user_fans_user: {
									_eq: this.userid
								}
							}, {
								user_user: {
									_eq: uni.getStorageSync('userInfo').id
								}
							}]
						},
						isloading: false,
						field_string: 'id'
					}).then(res => {
						this.getLink()
						console.log("删除成功", res)
					})
				}
			},
			goquestiondetails(id) {
				// console.log("点击", val);
				// let obje = encodeURIComponent(JSON.stringify(val))
				uni.navigateTo({
					url: `/pages_a/questiondetails/questiondetails?id=${id}`
				})
			},
			goquestion() {
				// console.log("接收的数据", this.stri);
				getApp().val = JSON.stringify(this.uservalue)
				uni.switchTab({
					url: `/pages/question/question`
				})
			},
			startmethod(e) {
				console.log('分享按钮', e);
			},
			changeselect(val) {
				this.selsectindex = val

			},
			goindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goshang() {
				uni.navigateBack({});
				console.log("传过来的数据", this.bgcolor)
			},
			getData(id) {
				this.$store.dispatch("remote/query", {
					model: "article_comment",
					order_by: {
						id: 'desc'
					},
					where: {
						user_user: {
							_eq: this.userid
						},
						article_article: {
							_is_null: false
						}
					},
					limit: this.pageSize,
					offset: (this.currentPage - 1) * this.pageSize,
					field_string: 'id content zanlink collect created_at  user_user article_article article{id title article_comment{id user{id nickname}}} article_comment_detail{id content img{url} video{url}}'
				}).then(res => {
					console.log('res----------', res);
					this.answerList = JSON.parse(JSON.stringify(res.data_list)).map(v => {
						v.created_at = Time(v.created_at)
						return v
					})
					let nameList = []
					for (let i = 0; i < this.answerList.length; i++) {
						let user_comment = ''
						for (let k = 0; k < this.answerList[i].content.length / 3; k++) {
							user_comment += this.answerList[i].content[k]
						}
						user_comment = user_comment + '...'
						this.answerList[i].content = user_comment
						nameList = []
						for (let j = 0; j < this.answerList[i].article.article_comment.length; j++) {

							if (this.answerList[i].article.article_comment[j].user && nameList.includes(this
									.answerList[i].article.article_comment[j].user.nickname) ==
								false) {
								nameList.push(this.answerList[i].article.article_comment[j].user.nickname)
							}
						}
						this.answerList[i].article.article_comment = nameList
					}
					console.log('回答列表', this.answerList);
				})
				this.$store.dispatch("remote/query", {
					model: "user",
					order_by: {
						id: 'asc'
					},
					where: {
						id: {
							_eq: id
						}
					},
					field_string: 'id nickname avatar{url} user_interest{id user_user user_fans_user} user_fans{id user_user user_fans_user} ud_profileimg_f95768(where:{type:{_eq:"答主简介"}}){id image{id url}} background_img{url} profile tag_list attach_data article_comments(where:{type:{_eq:"1"}}){id score} video{id video{url}} reward_funds_personnel{id} article_comment_score_aggregate{aggregate{avg{score}}}'
				}).then(res => {
					let deviceWidth = uni.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
					let px = (deviceWidth / 750) * Number(660)
					console.log('1111111111', res)
					res.data.tag_list = JSON.parse(res.data.tag_list)
					res.data.user_fans.forEach((v, i) => {
						if (v.user_user == uni.getStorageSync('userInfo').id) {
							this.linkblean = true
						}
					})
					let scoreNum = 0
					res.data?.article_comments?.forEach(v => {
						if (v.score) {
							scoreNum = scoreNum + v.score;
							res.data[`scoreNum`] = scoreNum / res.data?.article_comments?.length
						}
					})
					this.uservalue = JSON.parse(JSON.stringify(res.data))
					for (let i in this.uservalue.ud_profileimg_f95768) {
						var that = this
						let image_width = Math.floor(px)
						uni.getImageInfo({
							src: that.uservalue.ud_profileimg_f95768[i].image.url,
							success(res) {
								let rate = image_width / res.width
								that.uservalue.ud_profileimg_f95768[i].image.imgHeight = Math.floor(rate *
									res.height)

							}
						})

					}
					if (this.uservalue.article_comment_score_aggregate.aggregate.avg.score) {
						this.uservalue.article_comment_score_aggregate.aggregate.avg.score = this.uservalue
							.article_comment_score_aggregate.aggregate.avg.score.toFixed(1)
					}
					console.log('获取当前的用户信息', this.uservalue);
					console.log('获取当前的用户视频信息', this.uservalues);
				})
				this.$store.dispatch("remote/query", {
					model: "image",
					order_by: {
						id: 'asc'
					},
					where: {
						name: {
							_eq: '答主详情页'
						}
					},
					field_string: 'id name img{url}'
				}).then(res => {
					console.log('数据库获取图片', res);
					this.imgList = JSON.parse(JSON.stringify(res.data_list))
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;
		box-sizing: border-box;
		padding-bottom: 50rpx;

		.content-header {
			width: 100vw;
			height: 1330rpx;
			background-repeat: no-repeat;
			background-size: 107% 120%;
			background-position: 40% 100%;
			position: relative;

			.moder {
				width: 100%;
				height: 1320rpx;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.2);
				// background-blend-mode: screen;

			}

			.content-header-user {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 10;
				position: relative;
				box-sizing: border-box;
				padding-top: 180rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 42rpx;
				font-weight: 500;
				line-height: 40rpx;
				letter-spacing: 0px;
				color: #FFFFFF;

				.header-user-img {
					width: 150rpx;
					height: 150rpx;
					position: relative;
					margin-bottom: 16rpx;

				}

				.right-title-right {
					display: flex;
					font-family: Source Han Sans CN;
					font-size: 18rpx;
					font-weight: 500;
					line-height: 30rpx;
					letter-spacing: 0em;
					align-items: center;
					margin-top: 20rpx;
					color: #FFFFFF;

					.content-score-text {
						margin-left: 10rpx;
						font-size: 28rpx;
					}
				}
			}

			.content-header-mao {
				width: 100%;
				box-sizing: border-box;
				padding: 0 27rpx;
				margin-top: 30rpx;
				position: relative;
				z-index: 10;

				.header-mao-content {
					width: 100%;
					height: 130rpx;
					border-radius: 100rpx;
					overflow: hidden;
					background: rgba(179, 229, 255, 0.3);
					border: 4rpx solid rgba(255, 255, 255, 0.20);
					// border-image: linear-gradient(259deg, rgba(237, 237, 237, 0.20) 46%, rgba(255, 255, 255, 0.20) 146%) 2;
					backdrop-filter: blur(60px);
					box-sizing: border-box;
					padding: 25rpx 110rpx;
					display: flex;
					justify-content: space-between;

					.mao-content-list {
						// width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: space-between;
						font-family: Alibaba PuHuiTi 2.0;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 40rpx;
						text-align: right;
						letter-spacing: 0px;
						color: #fff;

					}
				}
			}

			.content-header-lable {
				width: 100%;
				box-sizing: border-box;
				padding: 0 54rpx;
				margin-top: 40rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 24rpx;
				font-weight: 600;
				line-height: 40rpx;
				letter-spacing: 0px;
				color: #FFFFFF;
				position: relative;
				z-index: 10;

				.header-lable-list {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 12rpx;

					.lable-list-text {
						display: inline-block;
						height: 40rpx;
						padding: 0 40rpx;
						font-family: Alibaba PuHuiTi 2.0;
						border-radius: 48rpx;
						margin-right: 22rpx;
						margin-bottom: 20rpx;
						font-size: 20rpx;
						line-height: 40rpx;
						text-align: center;
						font-weight: normal;
						text-align: center;
						display: flex;
						align-items: center;
						letter-spacing: 0px;
						background: rgba(240, 149, 0, 0.5);
						box-shadow: 0px 2px 10px 0px rgba(101, 100, 219, 0.2);
						color: #FFFFFF;
					}
				}
			}

			.content-header-postion {
				position: absolute;
				top: 200rpx;
				z-index: 10;
				right: 20rpx;
				display: flex;
				flex-direction: column;

				.content-bottom-rightbtn {
					// all: unset;
					// width: 40rpx !important;
					// height: 40rpx !important;
					// margin-bottom: 20rpx !important;
					border: none;
					padding: 0;
					margin: 0;
					background-color: rgba(0, 0, 0, 0);
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.content-header-video {
				width: 100%;
				box-sizing: border-box;
				padding: 0 27rpx;
				margin-top: 13rpx;
				position: relative;
				z-index: 10;

				.header-video-content {
					width: 100%;
					height: 390rpx;
					position: relative;

					.video-content-one {
						width: 655rpx;
						height: 136rpx;
						border-radius: 20rpx;
						opacity: 1;
						background: rgba(0, 0, 0, 0.3);
						border: 2rpx solid rgba(255, 255, 255, 0.20);
						backdrop-filter: blur(60px);
						position: absolute;
						top: 0;
						z-index: 2;
						left: 50%;
						transform: translateX(-50%);
					}

					.video-content-trhee {
						width: 100%;
						height: 369rpx;
						border-radius: 20rpx;
						opacity: 1;
						background: rgba(0, 0, 0, 0.3);
						border: 2rpx solid rgba(255, 255, 255, 0.20);
						backdrop-filter: blur(60px);
						z-index: 10;
						position: absolute;
						top: 20rpx;
						box-sizing: border-box;
						padding: 20rpx;

						.content-trhee-title {
							display: flex;
							flex-direction: column;
							color: #999999;
							font-family: Alibaba PuHuiTi 2.0;
							font-weight: 600;
							font-size: 18rpx;
							font-weight: 600;
							line-height: 30rpx;
							letter-spacing: 0px;
							margin-bottom: 25rpx;
						}

						.content-trhee-video {
							width: 100%;
							height: 240rpx;
							border-radius: 10rpx;
							opacity: 1;
						}
					}
				}
			}

			// z-index: 999;
			.content-header-nav {
				width: 100%;
				height: 170rpx;
				background-color: rgba(247, 247, 247, 0);
				// padding-left: 30rpx;
				position: fixed;
				z-index: 999989;

				//top: 80rpx;
				// height: var(--status-bar-height);
				.content-header-nav-bottom {
					width: 100%;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: Source Han Sans CN;
					font-size: 36rpx;
					font-weight: normal;
					line-height: 36rpx;
					// padding: 0 30rpx;
					letter-spacing: 0px;
					color: #fff;

					.content-body-left {
						width: 160rpx;
						height: 60rpx;
						display: flex;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 32rpx;
						opacity: 1;
						border: 1rpx solid rgba(0, 0, 0, 0.2);
						align-items: center;
						margin-left: 30rpx;

						.arrow-left {
							width: 49%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

			}
		}

		.content-body {
			width: 695rpx;
			min-height: 600rpx;
			background-color: #fff;
			margin: 0 auto;
			margin-top: -100rpx;
			border-radius: 25rpx;
			position: relative;
			z-index: 10;
			box-sizing: border-box;
			padding: 20rpx;

			.content-body-selsect {
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 42rpx;
				letter-spacing: 0em;
				color: #999999;
				margin-bottom: 20rpx;

				.selsect-text {
					font-family: Alibaba PuHuiTi 2.0;
					font-size: 32rpx;
					font-weight: bold;
					line-height: 42px;
					letter-spacing: 0em;
					color: #FDB727;
					position: relative;
				}

				.selsect-text::after {
					display: inline-block;
					content: '';
					width: 40rpx;
					height: 8rpx;
					border-radius: 5rpx;
					opacity: 1;
					background: #FDB727;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -15rpx;
				}
			}

			.content-body-ansewrdetalis {
				width: 100%;

				.textraea {
					width: 100%;
					min-height: 100% !important;
					// white-space: normal;
					// overflow: auto;
					// font-family: Alibaba PuHuiTi 2.0;
					font-size: 26rpx;
					line-height: 30rpx;
					color: #666666;
				}

				.user_img {
					margin: 10px 0;
					width: 100%;

					.show_img {
						width: 660rpx;
					}
				}
			}

			.content-body-two {
				width: 100%;
				margin-top: 20rpx;

				.body-two-list {
					width: 100%;

					.two-list-title {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-family: Alibaba PuHuiTi 2.0;
						font-size: 30rpx;
						font-weight: 600;
						letter-spacing: 0px;
						color: #4A4A4A;
					}

					.two-list-user {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-family: Source Han Sans CN;
						font-size: 20rpx;
						font-weight: normal;
						line-height: 45rpx;
						text-align: right;
						letter-spacing: 0px;
						color: #999999;
						margin-top: 15rpx;

						.list-user-left {
							display: flex;
							align-items: center;
							font-family: Source Han Sans CN;
							font-size: 26rpx;
							font-weight: bold;
							line-height: 42rpx;
							letter-spacing: -0.6px;

							color: #777777;
						}
					}

					.two-list-content {
						width: 100%;
						margin-top: 20rpx;

						.list-content-vids {
							width: 100%;

							.list-content-video {
								width: 635rpx;
								height: 400rpx;
								margin: 0 auto;
							}
						}


						.list-content-text {
							margin-top: 20rpx;
							font-family: Source Han Sans CN;
							font-size: 30rpx;
							font-weight: normal;
							line-height: 42rpx;
							letter-spacing: 0em;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							overflow: hidden;
							color: #999999;
						}

					}

					.two-list-bottom {
						width: 100%;

						.page-content-bodydown {
							width: 100%;
							display: flex;
							justify-content: space-between;
							font-size: 20rpx;
							font-family: Source Han Sans CN-Bold, Source Han Sans CN;
							font-weight: 700;
							color: #9E9E9E;
							line-height: 42rpx;

							.content-bodydown-left {
								width: 60%;
								overflow: hidden; // 表示当内容溢出元素框时内容会被修剪，并且其余内容是不可见的。
								text-overflow: ellipsis; // 表示当文本溢出包含元素时发生的事情显示省略符号来代表被修剪的文本。
								white-space: nowrap;
							}

							.content-bodydown-right {
								width: 38%;
							}
						}

						.page-content-bottom {
							width: 100%;
							display: flex;
							margin: 15rpx 0;

							.content-bottom-like {
								font-size: 18rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 26rpx;
								display: flex;
								align-items: center;
								margin-right: 25rpx;

								.bottom-like-img {
									width: 24rpx;
									height: 24rpx;
									margin-right: 10rpx;
								}
							}

							.content-bottom-comment {
								font-size: 18rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 26rpx;
								display: flex;
								align-items: center;

								.bottom-comment-img {
									width: 24rpx;
									height: 24rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}
			}
		}

		.content-footer {
			width: 100%;
			margin-top: 30rpx;

			.content-footer-title {
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 30rpx;
				font-weight: normal;
				line-height: 42rpx;
				letter-spacing: 0px;
				text-align: center;
				color: #666666;
				margin-bottom: 20rpx;
			}

			.content-footer-btn {
				width: 455rpx;
				height: 70rpx;
				border-radius: 80rpx;
				opacity: 1;
				margin: 0 auto;
				text-align: center;
				background: #F09500;
				font-family: Alibaba PuHuiTi 2.0;
				font-size: 24rpx;
				font-weight: bold;
				line-height: 70rpx;
				letter-spacing: 0px;
				color: #FFFFFF;
			}
		}
	}
</style>